<template>
  <div class="pages-container">
    <MainHeader />
    <img :src="solution.banner" style="width:100%" srcset="">
    <div class="solution">
      <h1>{{solution.title}}</h1>
      <div v-html="solution.introduction"></div>
    </div>
    <MainFooter />
  </div>
</template>

<script>
export default {
  name: 'SolutionPage',
  data() {
    return {
      solution: {}
    };
  },
  created() {
    this.asyncData();
  },
  methods: {
    asyncData() {
      this.$axios.get(`/nuxtApiSolution.json`).then((res) => {
        const { data } = res.data
        this.solution = data
      });
    },
  },
}
</script>
<style lang="less" scoped>
.solution{
  padding: 30px 10vw;
  h1{
    padding-bottom: 30px;
  }
}
</style>
